<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="header::head-fragment('首页')">
</head>
<body>
<div th:replace="header::header-fragment"></div>

<div class="fly-panel fly-column">
    <div class="layui-container">
        <!-- 1.渲染页面顶部的帖子分类信息 -->
        <ul class="layui-clear">
            <li th:class="${null ==categoryId} ?'layui-hide-xs layui-this':''"><a href="/">首页</a></li>
            <th:block th:unless="${null == bbsPostCategories}">
                <th:block th:each="c : ${bbsPostCategories}">
                    <li th:class="${null !=categoryId and categoryId==c.categoryId} ?'layui-hide-xs layui-this':''">
                        <a th:href="@{${'/index?categoryId='+c.categoryId}}"
                           th:text="${c.categoryName}">分享</a>
                    </li>
                </th:block>
            </th:block>

            <li class="layui-hide-xs layui-hide-sm layui-show-md-inline-block"><span class="fly-mid"></span></li>
        </ul>

        <div class="fly-column-right layui-hide-xs">
            <span class="fly-search"><i class="layui-icon"></i></span>
            <a th:href="@{/addPostPage}" class="layui-btn">发布新帖</a>
        </div>
    </div>
</div>

<div class="layui-container">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md8">
            <div class="fly-panel" style="margin-bottom: 0;">
                <div class="fly-panel-title fly-filter">
                    <a th:href="@{/index(keyword=${keyword},categoryId=${categoryId},orderBy=${orderBy})}"
                       th:class="${period == null ? 'layui-this':''}">默认</a>
                    <span class="fly-mid"></span>
                    <a th:class="${period == 'hot7' ? 'layui-this':''}"
                       th:href="@{/index(period='hot7',keyword=${keyword},categoryId=${categoryId},orderBy=${orderBy})}">周榜</a>
                    <span class="fly-mid"></span>
                    <a th:class="${period == 'hot30' ? 'layui-this':''}"
                       th:href="@{/index(period='hot30',keyword=${keyword},categoryId=${categoryId},orderBy=${orderBy})}">月榜</a>
                    <span class="fly-mid"></span>
                    <span class="fly-filter-right layui-hide-xs">
                        <a th:href="@{/index(orderBy='new',period=${period},keyword=${keyword},categoryId=${categoryId})}"
                           th:class="${orderBy == 'new' ? 'layui-this':''}">按最新</a>
                            <span class="fly-mid"></span>
                        <a th:href="@{/index(orderBy='comment',period=${period},keyword=${keyword},categoryId=${categoryId})}"
                           th:class="${orderBy == 'comment' ? 'layui-this':''}">按热议</a>
                    </span>
                </div>
                <!-- 2.渲染帖子分页列表数据 -->
                <th:block th:if="${#lists.isEmpty(pageResult.list)}">
                    <!-- 无数据时 -->
                    <div class="fly-none">没有相关数据</div>
                </th:block>
                <th:block th:unless="${#lists.isEmpty(pageResult.list)}">
                    <ul class="fly-list">
                        <th:block th:each="bbsPostListEntity : ${pageResult.list}">
                            <li>
                                <a th:href="@{${'/userCenter/'+bbsPostListEntity.publishUserId}}" class="fly-avatar">
                                    <img th:src="@{${bbsPostListEntity.headImgUrl}}"
                                         th:alt="${bbsPostListEntity.nickName}">
                                </a>
                                <h2>
                                    <a href="##" class="layui-badge"
                                       th:text="${bbsPostListEntity.postCategoryName}">分享</a>
                                    <a th:href="@{${'/detail/'+bbsPostListEntity.postId}}"
                                       th:text="${bbsPostListEntity.postTitle}">My-BBS开源啦</a>
                                </h2>
                                <div class="fly-list-info">
                                    <a th:href="@{${'/userCenter/'+bbsPostListEntity.publishUserId}}" link>
                                        <cite th:text="${bbsPostListEntity.nickName}">程序员十三</cite>
                                    </a>
                                    <span th:text="${#dates.format(bbsPostListEntity.createTime, 'yyyy-MM-dd HH:mm:ss')}">刚刚</span>
                                    <span class="fly-list-kiss layui-hide-xs" title="赞"><i
                                            class="iconfont icon-zan"></i> <th:block
                                            th:text="${bbsPostListEntity.postCollects}"></th:block></span>
                                    <span class="fly-list-nums"><i class="iconfont icon-pinglun1" title="评论"></i> <th:block
                                            th:text="${bbsPostListEntity.postComments}"></th:block></span>
                                </div>
                                <div class="fly-list-badge">
                                </div>
                            </li>
                        </th:block>
                    </ul>
                    <!-- 3.生成分页按钮 -->
                    <div style="text-align: center">
                        <div class="laypage-main">
                            <th:block th:if="${pageResult.currPage>1}">
                                <a class="laypage-prev"
                                   th:href="@{/index(period=${keyword},page=${pageResult.currPage-1},keyword=${keyword},categoryId=${categoryId},orderBy=${orderBy})}">
                                    &lt;&lt;</a>
                            </th:block>
                            <th:block th:if="${pageResult.currPage==1}">
                                <a class="laypage-prev"
                                   href="##">
                                    &lt;&lt;</a>
                            </th:block>
                            <th:block th:if="${pageResult.currPage-2 >=1}">
                                <a class="laypage-prev"
                                   th:href="@{/index(period=${period},page=${pageResult.currPage-2},keyword=${keyword},categoryId=${categoryId},orderBy=${orderBy})}"
                                   th:text="${pageResult.currPage - 2}">1</a>
                            </th:block>
                            <th:block th:if="${pageResult.currPage-1 >=1}">
                                <a class="laypage-prev"
                                   th:href="@{/index(period=${period},page=${pageResult.currPage-1},keyword=${keyword},categoryId=${categoryId},orderBy=${orderBy})}"
                                   th:text="${pageResult.currPage - 1}">1</a>
                            </th:block>
                            <a href="##" class="laypage-curr" th:text="${pageResult.currPage}">1</a>
                            <th:block th:if="${pageResult.currPage+1<=pageResult.totalPage}">
                                <a class="laypage-next"
                                   th:href="@{/index(period=${period},page=${pageResult.currPage+1},keyword=${keyword},categoryId=${categoryId},orderBy=${orderBy})}"
                                   th:text="${pageResult.currPage + 1}">1</a>
                            </th:block>
                            <th:block th:if="${pageResult.currPage+2<=pageResult.totalPage}">
                                <a class="laypage-next"
                                   th:href="@{/index(period=${period},page=${pageResult.currPage+2},keyword=${keyword},categoryId=${categoryId},orderBy=${orderBy})}"
                                   th:text="${pageResult.currPage + 2}">1</a>
                            </th:block>
                            <th:block th:if="${pageResult.currPage<pageResult.totalPage}">
                                <a class="laypage-next"
                                   th:href="@{/index(period=${period},page=${pageResult.currPage+1},keyword=${keyword},categoryId=${categoryId},orderBy=${orderBy})}">
                                    &gt;&gt;</a>
                            </th:block>
                            <th:block th:if="${pageResult.currPage==pageResult.totalPage}">
                                <a class="laypage-next"
                                   href="##">
                                    &gt;&gt;</a>
                            </th:block>
                        </div>
                    </div>
                </th:block>
            </div>
        </div>
        <div class="layui-col-md4">

            <div class="fly-panel">
                <h3 class="fly-panel-title">温馨通道</h3>
                <ul class="fly-panel-main fly-list-static">
                    <li>
                        <a href="https://github.com/ZHENFENG13/My-BBS" target="_blank">My-BBS的GitHub仓库，【欢迎Star】</a>
                    </li>
                    <li>
                        <a href="https://gitee.com/ZHENFENG13/My-BBS" target="_blank">My-BBS的Gitee(码云)仓库，【欢迎Star】</a>
                    </li>

                    <li>
                        <a href="https://www.lanqiao.cn/users/358858/?tab=courses-publisheda" target="_blank">My-BBS项目开发文档，【点击查看】</a>
                    </li>
                    <li>
                        <a href="https://github.com/ZHENFENG13/spring-boot-projects" target="_blank">
                            更多实用的spring-boot实战项目，【点击查看】
                        </a>
                    </li>
                </ul>
            </div>
            <!-- 4.渲染本周热议列表 -->
            <dl class="fly-panel fly-list-one">
                <dt class="fly-panel-title">本周热议</dt>
                <th:block th:if="${#lists.isEmpty(hotTopicBBSPostList)}">
                    <!-- 无数据时 -->
                    <div class="fly-none">没有相关数据</div>
                </th:block>
                <th:block th:unless="${#lists.isEmpty(hotTopicBBSPostList)}">
                    <th:block th:each="bbsEntity : ${hotTopicBBSPostList}">
                        <dd>
                            <a th:href="@{'/detail/'+${bbsEntity.postId}}" th:text="${bbsEntity.postTitle}">My-BBS开源啦</a>
                            <span><i class="iconfont icon-pinglun1"></i> <th:block
                                    th:text="${bbsEntity.postComments}"></th:block></span>
                        </dd>
                    </th:block>
                </th:block>
            </dl>

            <div class="fly-panel">
                <div class="fly-panel-title">
                    我的公众号
                </div>
                <div class="fly-panel-main">
                    <a href="https://juejin.im/user/59199e22a22b9d0058279886" target="_blank">
                        <img style="max-width: 60%;" th:src="@{/images/my-gzh-qrcode.jpg}">
                    </a>
                </div>
            </div>

            <div class="fly-panel">
                <div class="fly-panel-title">
                    我的新书
                </div>
                <div class="fly-panel-main">
                    <a href="https://item.jd.com/12890115.html" target="_blank">
                        <img style="max-width: 60%;" th:src="@{/images/my-book01.png}">
                    </a>
                </div>
            </div>

            <div class="fly-panel fly-link">
                <h3 class="fly-panel-title">友情链接</h3>
                <dl class="fly-panel-main">
                    <dd><a href="http://www.layui.com/" target="_blank">layui</a>
                    <dd>
                    <dd><a href="https://www.lanqiao.cn/users/358858" target="_blank">蓝桥</a>
                    <dd>
                    <dd><a href="https://juejin.im/user/59199e22a22b9d0058279886" target="_blank">程序员十三</a>
                    <dd>
                    <dd><a href="https://github.com/ZHENFENG13/My-BBS" target="_blank">GitHub</a>
                    <dd>
                    <dd><a href="http://13blog.site" target="_blank">13blog.site</a>
                    <dd>
                </dl>
            </div>

        </div>
    </div>
</div>

<div class="fly-footer">
    <p>My-BBS社区 2021 &copy; <a href="https://github.com/ZHENFENG13/My-BBS" target="_blank">十三</a></p>
</div>

<script th:src="@{/layui/layui.js}"></script>
<script type="text/javascript">
    layui.use(['layer', 'element', 'jquery'], function () {
        var layer = layui.layer, $ = layui.$, element = layui.element;
        var device = layui.device();
        //阻止IE7以下访问
        if (device.ie && device.ie < 8) {
            layer.alert('如果您非得使用 IE 浏览器访问社区，那么请使用 IE8+');
        }
        //搜索
        $('.fly-search').on('click', function () {
            layer.open({
                type: 1
                , title: false
                , closeBtn: false
                //,shade: [0.1, '#fff']
                , shadeClose: true
                , maxWidth: 10000
                , skin: 'fly-layer-search'
                , content: ['<form action="/index">'
                    , '<input autocomplete="off" placeholder="搜索内容，回车跳转" type="text" name="keyword">'
                    , '</form>'].join('')
                , success: function (layero) {
                    var input = layero.find('input');
                    input.focus();
                    layero.find('form').submit(function () {
                        var val = input.val();
                        if (val.replace(/\s/g, '') === '') {
                            return false;
                        }
                        input.val(input.val());
                    });
                }
            })
        });
    });
</script>
</body>
</html>